.clearfix:after {
  display: block;
  clear: both;
  content: " "; }

html, body, .box {
  width: 100%;
  overflow: hidden; }

header {
  height: 2rem;
  width: 100vw;
  background: url("../img/bg_02.png") repeat-x bottom;
  position: relative;
  left: 0;
  top: 0; }
  header .header_title {
    width: 100vw;
    height: 2rem;
    background: url("../img/shop_05.png") no-repeat center; }
    header .header_title #fh {
      margin-top: 0.6rem;
      margin-left: 0.4rem; }

.box {
  height: 93vh;
  overflow: auto;
  /*  .shop:nth-child(3) {
      .live_left {
        background: orangered;
      }
    }
    .shop:nth-child(6) {
      .live_left {
        background: greenyellow;
      }
    }*/ }
  .box .banner {
    width: 100vw;
    overflow: hidden; }
    .box .banner .swiper-container {
      width: 100vw; }
      .box .banner .swiper-container img {
        width: 100%; }
      .box .banner .swiper-container .swiper-pagination {
        position: relative;
        bottom: 0.2rem; }
        .box .banner .swiper-container .swiper-pagination span {
          width: 0.3rem;
          height: 0.3rem; }
        .box .banner .swiper-container .swiper-pagination .swiper-pagination-bullet-active {
          background: #ff6700; }
  .box .nav {
    margin-bottom: 0.6rem; }
    .box .nav ul li {
      width: 25vw;
      float: left;
      text-align: center; }
      .box .nav ul li img {
        width: 1.6rem;
        height: 1.6rem;
        display: block;
        margin: 0.4rem auto; }
      .box .nav ul li p {
        font-size: 0.44rem;
        color: #999999;
        line-height: 2; }
  .box .shop {
    padding: 0.2rem; }
    .box .shop .shop_title {
      padding: 0.3rem 0;
      border-bottom: 2px solid #dcdcdc; }
      .box .shop .shop_title span {
        font-size: 0.56rem;
        font-weight: 700; }
      .box .shop .shop_title span:nth-child(1) {
        padding-left: 0.2rem;
        border-left: 2px solid #d51938;
        float: left; }
      .box .shop .shop_title span:nth-child(2) {
        float: right;
        padding-right: 0.2rem; }
    .box .shop .shop_body {
      padding-top: 0.6rem; }
      .box .shop .shop_body ul li {
        margin-bottom: 0.6rem; }
        .box .shop .shop_body ul li div {
          float: left; }
        .box .shop .shop_body ul li .shop_body_left {
          background: #f4f4f4;
          width: 100%; }
          .box .shop .shop_body ul li .shop_body_left .num {
            background: #e00202;
            float: left;
            width: 1.2rem;
            height: 2.4rem;
            text-align: center;
            line-height: 2.4rem;
            color: white;
            font-size: 0.8rem;
            font-weight: 800; }
          .box .shop .shop_body ul li .shop_body_left img {
            display: block;
            float: left;
            height: 2.4rem; }
          .box .shop .shop_body ul li .shop_body_left .shop_li_title {
            margin-left: 0.6rem;
            float: left;
            font-size: 0.52rem;
            color: #999999;
            border-bottom: 0;
            line-height: 1.5;
            padding-top: .4rem; }
            .box .shop .shop_body ul li .shop_body_left .shop_li_title span {
              font-size: 0.48rem;
              font-weight: 500; }
            .box .shop .shop_body ul li .shop_body_left .shop_li_title b {
              color: #c7223d; }
          .box .shop .shop_body ul li .shop_body_left .money {
            float: right;
            color: #d51938;
            line-height: 2.4rem; }
            .box .shop .shop_body ul li .shop_body_left .money .fan {
              font-size: 1rem;
              font-weight: 800;
              color: #999999;
              line-height: 2.4rem; }
    .box .shop .more {
      height: 1.6rem;
      background: #f5f5f5;
      color: #666666;
      font-size: 0.56rem;
      text-align: center;
      line-height: 1.6rem;
      font-weight: 800; }
    .box .shop .live {
      width: 100%;
      margin-top: 1rem;
      margin-bottom: 1rem; }
      .box .shop .live .live_left {
        height: 7.04rem;
        width: 25%;
        float: left; }
        .box .shop .live .live_left p {
          color: white;
          font-size: 0.7rem;
          font-weight: 800;
          line-height: 3;
          text-align: center; }
      .box .shop .live .live_right {
        float: left;
        width: 74.8%;
        border-top: 1px solid lightgray;
        border-right: 1px solid lightgray; }
        .box .shop .live .live_right ul li {
          width: 33%;
          height: 1.74rem;
          float: left;
          border: 1px solid lightgray;
          border-top: 0;
          border-right: 0px;
          text-align: center;
          line-height: 1.74rem;
          font-size: 0.5rem;
          color: #999999; }
    .box .shop .iphone {
      width: 100%;
      margin-top: 1rem; }
      .box .shop .iphone ul li {
        width: 33%;
        float: left; }
        .box .shop .iphone ul li img {
          display: block;
          width: 0.8rem;
          margin: 0.4rem auto 0.2rem; }
        .box .shop .iphone ul li p {
          color: white;
          font-size: 0.48rem;
          text-align: center;
          line-height: 3; }
      .box .shop .iphone ul li:nth-child(1) {
        background: #38a4f1; }
      .box .shop .iphone ul li:nth-child(2) {
        background: #8bca11; }
      .box .shop .iphone ul li:nth-child(3) {
        background: #ff7404; }
  .box .login {
    background: #f8f8f8;
    margin-top: 0.4rem; }
    .box .login li {
      font-size: 0.6rem;
      line-height: 1.7rem;
      padding: 0 0.4rem;
      font-weight: 800;
      float: left; }
      .box .login li a {
        color: #303030;
        text-decoration: none; }
      .box .login li .top {
        font-size: 0.4rem;
        color: #303030; }
    .box .login li:last-child {
      float: right; }
  .box .footer {
    background: #eeeeee;
    text-align: center;
    line-height: 2.5; }
    .box .footer span {
      font-size: 0.56rem;
      color: #303030;
      padding: 0 0.2rem; }
    .box .footer p {
      font-size: 0.4rem;
      color: #B0B0B0; }

.live:nth-child(4) .live_left {
  background: url("../img/ju_76.png") no-repeat left bottom #ff3900; }

.live:nth-child(6) .live_left {
  background: url("../img/ju_81.png") no-repeat left bottom #8bca11; }

.live:nth-child(8) .live_left {
  background: url("../img/ju_89.png") no-repeat left bottom #838383; }

footer {
  width: 100vw;
  height: 2rem;
  background: red;
  position: fixed;
  bottom: 0; }
